<template>

<div class="banner"> 
  
<swiper  class="swiper" :options="swiperOption">
 
    <swiper-slide v-for="i in imgs.movieList.movies" :key="i.id">
       <div style="maxHeight:137px"  v-if="i.img"><img style="dispaly:black;maxHeight:137px" :src="i.img | setWH('96.140')" class="aa" alt="" /></div> 

<div>
  <p v-if="i.shows[0].showDate&&i.shows&&i">{{ i.shows[0].showDate }}</p >
 </div>
<van-notice-bar  :scrollable="true">
  <van-swipe
 
   
     
  >

   
  </van-swipe>
</van-notice-bar>
 
      </swiper-slide>
     
    <div class="swiper-pagination" v-for="d in imgs" :key="d.id" slot="pagination">

  
    </div>
  </swiper>

  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";

 import 'swiper/swiper-bundle.css'
export default {
 name: 'Banner',
    title: 'Grab cursor',
  components: {
    Swiper,
    SwiperSlide,
  },
   props:{
    imgs:Object/Array,
  },
  data() {
    return {
     
 swiperOption: {
          slidesPerView: 4,
          centeredSlides: true,
          spaceBetween: 30,
          
          grabCursor: true,
        
          pagination: {
            el: '.swiper-pagination',
            clickable:true
          }
        }
     
    };
  },
  methods:{
      toBuyTicket(id, nm) {
      this.$router.push({
        path: "/buyticket",
        query: { id, nm },
      });
    },
  },
  
};
</script>

<style lang="less"  scoped>
 //滚动样式
 .notice-swipe {
    height: 24px;
    line-height:24px;
  }

.wzms{
  height: 68px;
  margin: 0;
  padding:0;
overflow: hidden;
  p{
    line-height: 24px;
    height: 24px;
text-overflow: ellipsis;
 
   white-space: wrap;
  }
}
.banner{
  padding-left: 10px;
		padding-right: 10px;
		padding-top: 10px;

}
  .swiper-slide {
    width: 60%;
  }
  .swiper-slide:nth-child(2n) {
    width: 40%;
  }
  .swiper-slide:nth-child(3n) {
    width: 20%;
  }
  .swiper{
    	border-radius: 10px;
  .swiper-pagination{
    background-color: hotpink;
    width: 100%;
    height: 60px;
  }
  }
  
</style>